<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/free.css">
    <style>
        .text, .btn{
		    line-height: 70rem;
	    }
	
	    .text+ .text {
		    margin-left: 20rem;
	    }

        .btn+ .btn{
            border-left: 1rem solid #dee2e6;
        }

        .paystages+ .paystages{
            border-top: 1rem solid #dee2e6;
        }

        .el-form-item__label {
            flex-shrink: 0;
        }

        .el-form-item__content {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-row style="padding-bottom: 140rem;">
            <!-- 企业信息 -->
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">{{ type == '0' ? '供应商企业' : '采购商企业'}}</span>
                    </div>
                    <div class="py-2 flex align-center justify-center">
                        <div style="width: 150rem;height: 150rem;" class="ml-2 flex-shrink overflow-hidden rounded-lg flex align-center border border-success">
                            <el-image v-if="orderData.Acquisition_Order_SerialNumber" class="w-100" :src="imageApi + orderData[type == '0'?'Enterprise_Logo':'Enterprise_Logo1']" fit="contain">
                                <div slot="error" class="bg-light flex justify-center align-center" style="width: 150rem;height: 150rem;">
                                    <i class=" el-icon-picture text-muted" style="font-size: 120rem;"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="w-100 mx-2 flex flex-column justify-around">
                            <div class="font font-weight-bold w-100" style="line-height: 50rem;">
                                <span class="font">{{ type == '0' ? (orderData.Enterprise_Name || '') : (orderData.Enterprise_Name1 || '') }}</span>
                            </div>
                            <div class="font font-weight-bold w-100" style="line-height: 50rem;">
                                <span class="font">联系人： {{  type == '0' ? (orderData.Contacts  || '') : (orderData.Contacts1 || '') }}</span>
                            </div>
                            <div class="font font-weight-bold w-100" style="line-height: 50rem;">
                                <span class="font">联系方式：{{  type == '0' ? (orderData.Contacts_Phone || '') : (orderData.Contacts_Phone1 || '')  }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">{{ type == '1' ? '供应商企业' : '采购商企业'}}</span>
                    </div>
                    <div class="py-2 flex align-center justify-center">
                        <div style="width: 150rem;height: 150rem;" class="ml-2 flex-shrink overflow-hidden rounded-lg flex align-center border border-success">
                            <el-image v-if="orderData.Acquisition_Order_SerialNumber" class="w-100" :src="imageApi + orderData[type == '1'?'Enterprise_Logo':'Enterprise_Logo1']" fit="contain">
                                <div slot="error" class="bg-light flex justify-center align-center" style="width: 150rem;height: 150rem;">
                                    <i class=" el-icon-picture text-muted" style="font-size: 120rem;"></i>
                                </div>
                            </el-image>
                        </div>
                        <div class="w-100 mx-2 flex flex-column justify-around">
                            <div class="font font-weight-bold w-100" style="line-height: 50rem;">
                                <span class="font">{{ type == '1' ? (orderData.Enterprise_Name || '') : (orderData.Enterprise_Name1 || '') }}</span>
                            </div>
                            <div class="font font-weight-bold w-100" style="line-height: 50rem;">
                                <span class="font">联系人： {{  type == '1' ? (orderData.Contacts  || '') : (orderData.Contacts1 || '') }}</span>
                            </div>
                            <div class="font font-weight-bold w-100" style="line-height: 50rem;">
                                <span class="font">联系方式：{{  type == '1' ? (orderData.Contacts_Phone || '') : (orderData.Contacts_Phone1 || '')  }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 采购商品信息 -->
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">采购信息</span>
                    </div>
                    <div class="py-2 mx-2">
                        <div class="flex justify-between">
                            <div class="flex font w-100 text">
                                <span class="flex-shrink font-weight-bold">采购单号：</span>
                                <span >{{ formData.Acquisition_Unit_Price_SerialNumber || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="flex font w-100 text">
                                <span class="flex-shrink font-weight-bold">采购商品：</span>
                                <span >{{ formData.Article_Name || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">采购总量：</span>
                                <span>{{ formData.Total_Quantity || ''}}</span>
                            </div>
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">已采购量：</span>
                                <span>{{ formData.Sales_Quantity || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">剩余量：</span>
                                <span>{{ formData.Remain_Quantity || '' }}</span>
                            </div>
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">单价：</span>
                                <span>{{ formData.Unit_Price || '' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 交易信息 -->
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">交易信息</span>
                        <!-- <span class="font font-weight-bold mr-2">确认合同</span> -->
                    </div>
                    <div class="py-2 mx-2">
                        <div class="flex justify-between">
                            <div class="flex font w-100 text">
                                <span class="flex-shrink font-weight-bold">交易单号：</span>
                                <span >{{ orderData.Acquisition_Order_SerialNumber || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">交易数量：</span>
                                <span>{{ orderData.Quantity || ''}}</span>
                            </div>
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">交易金额：</span>
                                <span>{{ orderData.Amount ? orderData.Amount + '元' : '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="text-success font text-ellipsis w-100 text">
                                <span class="font-weight-bold">已付数量：</span>
                                <span>{{ orderData.Paid_Amount ? orderData.Paid_Amount + '元' : '' }}</span>
                            </div>
                            <div class="text-danger font text-ellipsis w-100 text">
                                <span class="font-weight-bold">未付金额：</span>
                                <span>{{ orderData.Remain_Amount ? orderData.Remain_Amount + '元' : '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font text-ellipsis w-100 text">
                                <span class="flex-shrink font-weight-bold">付款类型：</span>
                                <span>{{ orderData.Trading_SerialNumber || '' }}</span>
                            </div>
                            <div class="font text-ellipsis w-100 text">
                                <span class="flex-shrink font-weight-bold">支付方式：</span>
                                <span>{{ orderData.Payment_Method || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font w-100 text">
                                <span class="flex-shrink font-weight-bold">装运方式：</span>
                                <span>{{ orderData.Shipment_Method || '' }}</span>
                            </div>
                            <div class="font w-100 text">
                                <span class="flex-shrink font-weight-bold">运输方式：</span>
                                <span>{{ orderData.Transport_Method || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font w-100 text">
                                <span class="flex-shrink font-weight-bold">发货地址：</span>
                                <span>{{ formData.Address || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="text-success font text-ellipsis w-100 text">
                                <span class="font-weight-bold">已发货：</span>
                                <span>{{ orderData.Delivery_Quantity || '' }}{{ orderData.Unit || '' }}</span>
                            </div>
                            <div class="text-danger font text-ellipsis w-100 text">
                                <span class="font-weight-bold">未发货：</span>
                                <span>{{ orderData.Undelivery_Quantity || '' }}{{ orderData.Unit || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="text-success font text-ellipsis w-100 text">
                                <span class="font-weight-bold">已收货：</span>
                                <span>{{ orderData.Receipt_Quantity || '' }}{{ orderData.Unit || '' }}</span>
                            </div>
                            <div class="text-danger font text-ellipsis w-100 text">
                                <span class="font-weight-bold">未收货：</span>
                                <span>{{ orderData.Unreceipt_Quantity || '' }}{{ orderData.Unit || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font w-100 text">
                                <span class="flex-shrink font-weight-bold">收货地址：</span>
                                <span>{{ orderData.Province || '' }}{{ orderData.City || '' }}{{ orderData.County || '' }}{{ orderData.Detailed_Address || '' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font w-100 text">
                                <span class="flex-shrink font-weight-bold">补贴条款：</span>
                                <span>{{ formData.Supplementary_Provisions || '暂无' }}</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font w-100 text">
                                <span class="flex-shrink font-weight-bold">补充说明：</span>
                                <span>{{ formData.Supplementary_Explanation || '暂无' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 付款周期 -->
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg">
                    <div class="flex justify-between align-center py-2 border-bottom">
                        <span class="font font-weight-bold ml-2">付款周期</span>
                    </div>
                    <div class="pt-2 mx-2 paystages" v-for="(item, index) in paystages" :key="index">
                        <div class="flex justify-between">
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">付款阶段：</span>
                                <span>{{ item.Stage_Name }}</span>
                            </div>
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">付款比例：</span>
                                <span>{{ item.Percent }}%</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">应付金额：</span>
                                <span>{{item.Trading_Amount}}元</span>
                            </div>
                            <div class="font text-ellipsis w-100 text">
                                <span class="font-weight-bold">付款周期：</span>
                                <span>{{item.Pay_Time}}天</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="text-success font text-ellipsis w-100 text">
                                <span class="font-weight-bold">已付金额：</span>
                                <span>{{item.Paid_Amount}}元</span>
                            </div>
                            <div class="text-danger font text-ellipsis w-100 text">
                                <span class="font-weight-bold">未付金额：</span>
                                <span>{{item.Remain_Amount}}元</span>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div class="text-success font text-ellipsis w-100 text">
                                <span class="font-weight-bold">已收金额：</span>
                                <span>{{item.Collection_Amount}}元</span>
                            </div>
                            <div class="text-warning font text-ellipsis w-100 text">
                                <span class="font-weight-bold">待收金额：</span>
                                <span>{{item.Unamount}}元</span>
                            </div>
                        </div>
                        <div v-if="orderData.Contract_Status == '11'" class="flex justify-between border-top">
                            <div @click="handleMoney(item)" class="font w-100 text-center btn">
                                <span>{{ type=='1' ? '收款' : '付款' }}</span>
                            </div>
                            <div @click="handleGoods(item)" v-if="item.Stage_Name === '发货'" class="font w-100 text-center btn">
                                <span>{{ type=='1' ? '发货' : '收货' }}</span>
                            </div>
                            <div @click="handleInvoice(item)" class="font w-100 text-center btn">
                                <span>{{ type=='1' ? '开票' : '收票' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24">
                <div class="flex align-center bg-white fixed-bottom shadow" style="height: 120rem;">
                    <template v-if="orderData.Row_Status == '0'">
                        <template v-if="type == '0'">
                            <div @click="handleExamine('2')" class="ml-2 bg-success w-100 flex justify-center align-center text-white"  style="height: 80rem; border-top-left-radius: 260rem; border-bottom-left-radius: 260rem;">
                                <span class="font font-weight-bold">通过</span>
                            </div>
                            <div @click="handleExamine('3')" class="mr-2 bg-danger w-100 flex justify-center align-center text-white"  style="height: 80rem; border-top-right-radius: 260rem; border-bottom-right-radius: 260rem;">
                                <span class="font font-weight-bold">拒绝</span>
                            </div>
                        </template>
                        <template v-else>
                            <div class="mx-2 bg-warning w-100 flex justify-center align-center text-white rounded-circle"  style="height: 80rem;">
                                <span class="font font-weight-bold">待对方审核</span>
                            </div>
                        </template>
                    </template>
                    <template v-else-if="orderData.Row_Status == '2'">
                        <template v-if="type == '0' && orderData.Contract_Status.charAt(1) == '0' || type == '1' && orderData.Contract_Status.charAt(0) == '0'">
                            <div @click="handleContract" class="mx-2 bg-primary w-100 flex justify-center align-center text-white rounded-circle"  style="height: 80rem;">
                                <span class="font font-weight-bold">确认合同</span>
                            </div>
                        </template>
                        <template v-else-if="type == '0' && orderData.Contract_Status == '01' || type == '1' && orderData.Contract_Status == '10'">
                            <div class="mx-2 bg-warning w-100 flex justify-center align-center text-white rounded-circle"  style="height: 80rem;">
                                <span class="font font-weight-bold">待对方确认合同</span>
                            </div>
                        </template>
                        <template v-else-if="orderData.Contract_Status == '11'">
                            <div class="mx-2 bg-success w-100 flex justify-center align-center text-white rounded-circle"  style="height: 80rem;">
                                <span class="font font-weight-bold">双方已确认合同</span>
                            </div>
                        </template>
                    </template>
                    <template v-else-if="orderData.Row_Status == '3'">
                        <div class="mx-2 bg-danger w-100 flex justify-center align-center text-white rounded-circle"  style="height: 80rem;">
                            <span class="font font-weight-bold">已拒绝</span>
                        </div>
                    </template>
                </div>
            </el-col>
        </el-row>
        <!-- 付款 -->
        <el-dialog title="合同付款" :visible.sync="dialogPayVisible" fullscreen :close-on-click-modal="false" :show-close="false" center destroy-on-close>
            <div style="height: calc(100vh - 54px - 130px);">
                <el-descriptions :column="4"  direction="vertical">
                    <el-descriptions-item label="合同总额">
                        <span class="font text-dark">{{ orderData.Amount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="本期应付">
                        <span class="font text-dark">{{ payForm.Trading_Amount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="已付金额">
                        <span class="font text-success">{{ payForm.Paid_Amount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="未付金额">
                        <span class="font text-danger">{{ payForm.Remain_Amount || 0 }}元</span>
                    </el-descriptions-item>
                </el-descriptions>
                <el-form ref="payForm" :model="payForm" class="w-100">
                    <el-form-item label="本次付款" class="flex" prop="Amount" :rules="[{ required: true, message: '请输入本次付款', trigger: 'blur' }]">
                        <el-input-number :min="1" :max="Number(payForm.Remain_Amount)" v-model.trim="payForm.Amount" placeholder="请输入本次付款" class="w-100" type="number"/>
                    </el-form-item>
                    <el-form-item label="上传凭证" prop="Picture_URL" :rules="[{ required: true, message: '请上传凭证', trigger: 'change' }]">
                        <yl-upload v-model="payForm.Picture_URL"></yl-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogPayVisible=false">取消</el-button>
                <el-button type="primary" @click="submitPay" :loading="loading">确定</el-button>
            </span>
        </el-dialog>
        <!-- 收款 -->
        <el-dialog title="收款明细" :visible.sync="dialogCollectionVisible" fullscreen :close-on-click-modal="false" :show-close="false" center destroy-on-close>
            <div style="height: calc(100vh - 54px - 130px); overflow: auto;">
                <el-descriptions :column="2"  direction="vertical" border class="mb-3">
                    <el-descriptions-item label="合同总额">
                        <span class="font text-dark">{{ orderData.Amount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="本期应付">
                        <span class="font text-dark">{{ payForm.Trading_Amount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="已付金额">
                        <span class="font text-success">{{ payForm.Paid_Amount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="未付金额">
                        <span class="font text-danger">{{ payForm.Remain_Amount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="已收金额">
                        <span class="font text-success">{{ payForm.Collection_Amount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="未收金额">
                        <span class="font text-danger">{{ payForm.Unamount || 0 }}元</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="本次可收金额">
                        <span class="font text-warning">{{ payForm.maxAmount || 0 }}元</span>
                    </el-descriptions-item>
                </el-descriptions>
                <el-form ref="payForm" :model="payForm" class="w-100">
                    <el-form-item label="本次收款" class="flex" prop="Amount" :rules="[{ required: true, message: '请输入本次付款', trigger: 'blur' }]">
                        <el-input-number :min="1" :max="payForm.maxAmount" v-model.trim="payForm.Amount" placeholder="请输入本次付款" class="w-100" type="number"/>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogCollectionVisible = false">取消</el-button>
                <el-button type="primary" @click="submitCollection" :loading="loading">确定</el-button>
            </span>
        </el-dialog>
        <!-- 发货 -->
        <el-dialog title="填写物流" :visible.sync="dialogShipVisible" fullscreen :close-on-click-modal="false" :show-close="false" center destroy-on-close>
            <div style="height: calc(100vh - 54px - 130px);">
                <el-form ref="logistics" :model="acquisition_order_logistics" class="w-100">
                    <el-form-item label="物流公司" class="flex" prop="Logistics_Code" :rules="[{ required: true, message: '请选择物流公司', trigger: 'change' }]">
                        <el-select v-model="acquisition_order_logistics.Logistics_Code" placeholder="请选择物流公司" filterable class="w-100">
                            <el-option v-for="(item, index) in logistics_info" :key="index" :label="item.Logistics_Name" :value="item.Logistics_Code" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="物流单号" class="flex" prop="Logistics_Number" :rules="[{ required: true, message: '请输入物流单号', trigger: 'blur' }]">
                        <el-input v-model.trim="acquisition_order_logistics.Logistics_Number" placeholder="请输入物流单号" class="w-100"/>
                    </el-form-item>
                    <el-form-item label="上传凭证" prop="Picture_URL" :rules="[{ required: true, message: '请上传凭证', trigger: 'change' }]">
                        <yl-upload v-model="acquisition_order_logistics.Picture_URL"></yl-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogShipVisible = false">取消</el-button>
                <el-button type="primary" @click="submitLogistics" :loading="loading">确定</el-button>
            </span>
        </el-dialog>
        <!-- 收获 -->
        <el-dialog title="收货详情" :visible.sync="dialogReceiveVisible" fullscreen :close-on-click-modal="false" :show-close="false" center destroy-on-close>
            <div style="height: calc(100vh - 54px - 130px);overflow: auto;">
                <el-descriptions :column="2"  direction="vertical" border class="mb-3">
                    <el-descriptions-item label="物流公司">
                        <span class="font text-dark">{{ acquisition_order_logistics.Logistics_Name || '' }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="物流单号">
                        <span class="font text-dark">{{ acquisition_order_logistics.Logistics_Number || '' }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="发货时间">
                        <span class="font text-dark">{{ acquisition_order_logistics.Delivery_Data || '' }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="已货数量">
                        <span class="font text-dark">{{ acquisition_order_logistics.Delivery_Quantity || '' }}{{orderData.Unit || ''}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="已确认收货">
                        <span class="font text-success">{{ orderData.Receipt_Quantity || '' }}{{orderData.Unit || ''}}</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="未确认收货">
                        <span class="font text-danger">{{ orderData.Unreceipt_Quantity || '' }}{{orderData.Unit || ''}}</span>
                    </el-descriptions-item>
                </el-descriptions>
                <el-form ref="receive" :model="acquisition_order_logistics" class="w-100">
                    <el-form-item label="收货数量" class="flex" prop="Quantity" :rules="[{ required: true, message: '请输入收货数量', trigger: 'blur' }]">
                        <el-input-number :min="1" :max="Number(acquisition_order_logistics.Delivery_Quantity)" v-model.trim="acquisition_order_logistics.Quantity" placeholder="请输入收货数量" class="w-100"/>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogReceiveVisible = false">取消</el-button>
                <el-button type="primary" @click="submitReceive" :loading="loading">确定</el-button>
            </span>
        </el-dialog>
        <!-- 开票 -->
        <el-dialog title="开发票" :visible.sync="dialogInvoiceUploadVisible" fullscreen :close-on-click-modal="false" :show-close="false" center destroy-on-close>
            <div style="height: calc(100vh - 54px - 130px);">
                <el-form ref="invoiceForm" :model="invoiceForm" class="w-100">
                    <el-form-item label="订单编号" class="flex">
                        <el-input disabled :value="orderData.Acquisition_Order_SerialNumber" class="w-100"/>
                    </el-form-item>
                    <el-form-item label="上传发票" prop="Picture_URL" :rules="[{ required: true, message: '请上传发票', trigger: 'change' }]">
                        <yl-upload v-model="invoiceForm.Picture_URL"></yl-upload>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogInvoiceUploadVisible=false">取消</el-button>
                <el-button type="primary" @click="submitInvoiceUpload" :loading="loading">确定</el-button>
            </span>
        </el-dialog>
        <!-- 收票 -->
        <el-dialog title="收发票" :visible.sync="dialogInvoiceViewVisible" fullscreen :close-on-click-modal="false" :show-close="false" center destroy-on-close>
            <div style="height: calc(100vh - 54px - 130px); overflow: auto;">
                <div v-for="(item, index) in InvoiceView" :key="index" class="flex border-left paystages">
                    <el-image class="flex-shrink border border-success ml-2 my-2" ref="previewInvoice" :src="imageApi + item.Picture_URL" 
                        :preview-src-list="[imageApi + item.Picture_URL]" style="width: 250rem;height: 250rem;" fit="contain">
                        <div slot="error" class="bg-light flex justify-center align-center" style="width: 250rem;height: 250rem;">
                            <i class=" el-icon-picture text-muted" style="font-size: 120rem;"></i>
                        </div>
                    </el-image>
                    <div class="w-100 ml-2 flex justify-around align-center border-left border-right py-2">
                        <el-button class="ml-2" type="success" @click="preview(index)">查看</el-button>
                        <el-button class="mr-2" type="primary" @click="download(item)">下载</el-button>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogInvoiceViewVisible=false" >取消</el-button>
            </span>
        </el-dialog>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/jweixin.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/my-purchase-detail.js"></script>
</body>

</html>